<template>
  <el-tooltip v-if="src" :disabled="!src">
    <template v-if="imageUrl" v-slot:content>
      <div>
        <img style="width: 200px; object-fit: contain" :src="imageUrl" />
      </div>
    </template>
    <el-image
      :class="'pattern-' + size"
      :src="imageUrl"
      fit="contain"
      :preview-src-list="showPreview ? [imageUrl] : undefined"
      :lazy="lazy"
    >
      <template v-slot:error>
        <div class="el-image__error"></div>
      </template>
    </el-image>
  </el-tooltip>
</template>

<script>
export default {
  name: "TheImage",
  pluginId: "img",
  props: {
    src: {
      type: [String, Array],
    },
    size: {
      type: String,
      default: "small",
    },
    showPreview: {
      type: Boolean,
      default: true,
    },
    lazy: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    imageUrl() {
      if (Array.isArray(this.src)) {
        const firstImage = this.src[0];
        if (typeof firstImage === "string") {
          return firstImage;
        } else if (firstImage && firstImage.img_url) {
          return firstImage.img_url;
        } else if (firstImage && firstImage.url) {
          return firstImage.url;
        } else {
          return "";
        }
      }
      return this.src;
    },
  },
};
</script>

<style scoped>
.pattern-mini {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.pattern-small {
  width: 50px;
  height: 50px;
  line-height: 30px;
}

.pattern-medium {
  width: 80px;
  height: 80px;
}
</style>
